<template>
  <div class="bgbg" v-if="Isshow2">
    <div class="z4">
      <div class="closediv" @click="closeshow"></div>
      <div class="title">水位计-{{ data.code }}</div>
      <div class="bodyt">
        <div class="time">
          <el-select class="select" v-model="data.select" placeholder="月">
            <el-option label="时" value="4"></el-option>
            <el-option label="天" value="3"></el-option>
            <el-option label="月" value="2"></el-option>
            <el-option label="年" value="1"></el-option>
          </el-select>
          <el-date-picker
            class="date"
            v-model="data.value1"
            type="datetimerange"
            start-placeholder="Start date"
            range-separator="——"
            end-placeholder="End date"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY-MM-DD"
            time-format="HH:mm:ss"
          />
          <el-button color="#46A5D9" @click="resetview">搜索</el-button>
        </div>
        <div class="echarts">
          <MyCharts
            v-if="datashow"
            :dataSource="data.dataSource"
            canvasWidth="100%"
            canvasHeight="100%"
          ></MyCharts>
          <h1 style="text-align: center" v-else>暂无数据</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Getshenyaji, getshenyajilist, getshuiweicode } from "@/api/index";
import MyCharts from "@/components/echarts/index.vue";
import { dataTool } from "echarts";
import { ref, reactive, onMounted } from "vue";
import moment from "moment";
let datashow = ref(true);
const data = reactive({
  value1: [
    moment().format("YYYY-MM-DD") + " " + moment().format("00:00:00"),
    moment().format("YYYY-MM-DD") + " " + moment().format("23:59:59"),
  ],
  select: "4",
  code: "4208820104",
  dataSource: {
    title: {
      show: false,
      text: "Rainfall and Flow Relationship",
      left: "center",
    },
    grid: {
      bottom: "22%",
      top: "18%",
      left: "12%",
    },

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "#505765",
        },
      },
    },
    legend: {
      data: ["水位(m)"],
      left: "center",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: false },
        nameTextStyle: {
          color: "#ffffff",
          // verticalAlign: "",
          //   padding: [-5, 50, 0, 0],
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            width: 2,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: "dashed",
            color: "#3B3F37",
          },
        },
        axisLabel: {
          color: "#ffffff",
          rotate: 35,
        },
        data: [
          "5-1",
          "5-2",
          "5-3",
          "5-4",
          "5-5",
          "5-6",
          "5-7",
          "5-8",
          "5-9",
          "5-10",
          "5-11",
          "5-12",
          "5-13",
          "5-14",
          "5-15",
          "5-16",
          "5-17",
          "5-18",
          "5-19",
          "5-20",
          "5-21",
          "5-22",
          "5-23",
          "5-24",
          "5-25",
          "5-26",
          "5-27",
          "5-28",
          "5-29",
          "5-30",
          "5-31",
        ],
      },
    ],
    yAxis: [
      {
        name: "水位(m)",
        type: "value",
        boundaryGap: [0, "1%"],
        nameLocation: "end",
        alignTicks: true,
        nameTextStyle: {
          color: "#ffffff",
          //   align: "top",
          //   verticalAlign: "top",
          // verticalAlign: "",
          // padding: [-260, 0, 0, 0],
        },
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            width: 2,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "solid",
            color: "grey",
          },
        },
        axisLabel: {
          color: "#ffffff",
        },
      },
      // {
      //   name: "温度（℃）",
      //   nameLocation: "end",
      //   alignTicks: true,
      //   type: "value",
      //   nameTextStyle: {
      //     color: "#ffffff",
      //     //   align: "top",
      //     //   verticalAlign: "top",
      //     // padding: [-260, 0, 0, 0],
      //   },
      //   type: "value",
      //   axisLine: {
      //     show: true,
      //     lineStyle: {
      //       color: "#fff",
      //       width: 2,
      //     },
      //   },
      //   splitLine: {
      //     show: true,
      //     lineStyle: {
      //       type: "solid",
      //       color: "grey",
      //     },
      //   },
      //   axisLabel: {
      //     color: "#ffffff",
      //   },
      // },
    ],
    series: [
      {
        name: "水位(m)",
        type: "line",

        symbol: "emptyCircle",
        showSymbol: true, //是否默认展示圆点
        areaStyle: {
          opacity: 0,
        },
        itemStyle: {
          normal: {
            color: "#5ADBE9", //改变折线点的颜色
          },
        },
        lineStyle: {
          width: 1,
          color: "#5ADBE9",
        },
        // emphasis: {
        //   focus: "series",
        // },
        // prettier-ignore
        data: [4,5,3,2,7,8,5,3,5,8,4,2,5,7,4,5,3,2,7,8,5,3,5,8,4,2,5,7,7,4,3],
      },
      // {
      //   name: "温度（℃）",
      //   type: "line",
      //   yAxisIndex: 0,
      //   symbol: "emptyCircle",
      //   showSymbol: true, //是否默认展示圆点
      //   areaStyle: { opacity: 0 },
      //   itemStyle: {
      //     normal: {
      //       color: "#EC8A09", //改变折线点的颜色
      //     },
      //   },
      //   lineStyle: {
      //     width: 1,
      //     color: "#EC8A09",
      //   },
      //   // emphasis: {
      //   //   focus: "series",
      //   // },
      //   data: [
      //     15, 42, 45, 12, 35, 34, 13, 45, 12, 15, 13, 56, 34, 15, 42, 45, 12,
      //     35, 34, 13, 45, 12, 15, 13, 56, 34, 32, 14, 23, 42, 15,
      //   ],
      // },
    ],
  },
});
let Isshow2 = ref(false);
const closeshow = () => {
  Isshow2.value = false;
};
ue.interface.Isshowshuweiji = function (val) {
  Isshow2.value = true;
  data.code = val;
  getshenyaji();
};
onMounted(() => {
  // getshenyaji();
});
function getshenyaji() {
  getshuiweicode({
    type: data.select,
    stcd: data.code,
    startTime: data.value1[0],
    endTime: data.value1[1],
  }).then((res) => {
    console.log(res.data);
    if (
      res.data.length == 1 &&
      res.data[0].date == null &&
      res.data[0].avgValue == null
    ) {
      datashow.value = false;
    } else {
      datashow.value = true;
      // res.data.reverse();
      data.dataSource.xAxis[0].data = res.data.map((item) =>
        item.date.substring(0, 16)
      );
      data.dataSource.series[0].data = res.data.map((item) => item.avgValue);
      // data.dataSource.series[1].data = res.data.map(
      //   (item) => item.temperature
      // );
    }
  });
}
const resetview = () => {
  getshenyaji();
  // Getshenyaji({
  //   type: data.select,
  //   // code: data.code,
  //   code: "P1",
  //   start: data.value1[0],
  //   end: data.value1[1],
  // }).then((res) => {
  //   // console.log(res.result);
  //   if (res.data.length == 0) {
  //     datashow.value = false;
  //   } else {
  //     datashow.value = true;
  //     data.dataSource.xAxis[0].data = res.data.map((item) => item.time);
  //     data.dataSource.series[0].data = res.data.map((item) => item.pressure);
  //     // data.dataSource.series[1].data = res.result.map(
  //     //   (item) => item.temperature
  //     // );
  //   }
  // });
};
</script>

<style lang="scss">
.bgbg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 999;
  .z4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 450.37px;
    background: url("@/assets/image/z4(1).png") 0px no-repeat;
    background-size: cover;
    color: white;
    padding-left: 17px;
    box-sizing: border-box;
    z-index: 99999;
    .closediv {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 15px;
      height: 15px;
      // border: 1px solid red;
      cursor: pointer;
    }
    .title {
      font-family: "Source Han Sans CN";
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
      // line-height: 25px;
      // text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .bodyt {
      width: 100%;
      height: 419.29px;
      position: absolute;
      top: 30px;
      left: 0px;
      .time {
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        //   border: 1px solid red;
        .select {
          margin-top: 21px;
          margin-left: 64px;
          color: #ffffff;
        }
        .date {
          margin: 21px 40px 0px 20px;
        }
        .el-button {
          color: #ffffff;
          margin-top: 21px;
        }
      }
      .echarts {
        position: absolute;
        top: 80px;
        width: 100%;
        height: 338px;
        //   border: 1px solid red;
      }
    }
  }
}
.bgbg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.5); /* 遮罩层颜色和透明度 */
}
::v-deep {
}
</style>